<%--
    历史记录：显示账单信息，统计图
    产品激活码：e5600a35-00f272ae1-d467-73b5c9064a93
    我让用户看到优惠多少钱，实际花费多少钱
    饼状图~当月的消费（店铺名/次数）占比，优惠(总金额/实际)占比
    柱状图：6~7个月的账单信息
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--模拟后端的，存储后端数据--%>
<%--存储当月的优惠，总消费--%>
<%--存储上个月的优惠，总消费--%>
<%--存储近7个月的优惠，总消费--%>
<%--字符串--%>
<form id="dataAll">
    <c:forEach items="${DataList}" var="data" >
        <input type="hidden" value="${data.money}">
        <input type="hidden" value="${data.discount}">
        <input type="hidden" value="${data.sum}">
    </c:forEach>
</form>

<%--存储当前月份--%>
<input type="hidden" id="day" value="${month}">


<div class="col-md-9">
    <div class="data_list">
        <div class="data_list_title"><span class="iconfont icon-zhangdan_o "></span>&nbsp;数据报表 </div>
        <div class="container-fluid">
            <div class="row" style="padding-top: 20px;">
                <div class="col-md-6">
                    <div id="mymain" style="height: 200px;width: 100%"></div>
                </div>
                <div class="col-md-6">
                    <div id="mymain2" style="height: 200px;width: 100%"></div>
                </div>
                <div class="col-md-12">
                    <div id="mychart" class="mychart">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .mychart{
        height: 500px;
        overflow: scroll;
    }

</style>

<script type="text/javascript">
//7个月的优惠 当月就是mon[0]
//准备
    var day = $("#day").val() //当前月份
    var month = []
    var dis = [];
    var mon = [];
    var sum = []
    var j = 0
    //得到form
    var dataAll = document.getElementById('dataAll')
    for (var i = 0;i<21;j++){
        if (typeof(dataAll[i])== "undefined"){
            break
            // dis[j] = 0
            // mon[j] = 0
            // i+=3
        }
        else {
            mon[j] = dataAll[i].value
            i++
            dis[j] = dataAll[i].value
            i++
            sum[j] = dataAll[i].value
            i++
        }

    }

    // 基于准备好的dom，初始化echarts实例
    window.addEventListener('load',function (){
        var myChart = echarts.init(document.getElementById('mymain'), 'wonderland');
        //饼图可以总计
        //还需要一个按月份的统计图
        myChart.setOption({
            series : [
                {
                    name: ['本月优惠','实际支付'],
                    type: 'pie',    // 设置图表类型为饼图
                    radius: '40%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                    data:[          // 数据数组，name 为数据项名称，value 为数据项值
                        {value:dis[0],name:'优惠',itemStyle:{normal:{color:'#FE0000'}}},
                        {value:mon[0],name:'实际支付',itemStyle:{normal:{color:'#02B0ED'}}},
                    ],
                    label : {
                        normal : {
                            formatter: '{b}:{c}: ({d}%)',
                            textStyle : {
                                fontWeight : 'normal',
                                fontSize : 15
                            }
                        }
                    },
                }
            ],
            legend: {
                data:['本月优惠','实际支付']
            }
        })
        myChart = echarts.init(document.getElementById('mymain2'), 'wonderland');
        //饼图可以总计
        //还需要一个按月份的统计图
        myChart.setOption({
            series : [
                {
                    name: ['上月优惠','实际支付'],
                    type: 'pie',    // 设置图表类型为饼图
                    radius: '40%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                    data:[          // 数据数组，name 为数据项名称，value 为数据项值
                        {value:dis[1],name:'优惠',itemStyle:{normal:{color:'#FE0000'}}},
                        {value:mon[1],name:'实际支付',itemStyle:{normal:{color:'#02B0ED'}}},
                    ],
                    label : {
                        normal : {
                            formatter: '{b}:{c}: ({d}%)',
                            textStyle : {
                                fontWeight : 'normal',
                                fontSize : 15
                            }
                        }
                    },
                }
            ],
            legend: {
                data:['上月优惠','实际支付']
            }
        })
    })
window.addEventListener('load',function (){
    //月份集合，优惠，实际支付

    loadMonthChart(month,mon,dis,sum);
})

/**
 * 加载柱状图:柱状图
 */
function loadMonthChart(monthArray, moneyArray,disArray,sum) {
    // 基于准备好的dom，初始化echarts实例 ---柱状图显示的div
    var myChart = echarts.init(document.getElementById('mychart'));

    // 指定图表的配置项和数据
    // X轴显示名称
    var dataAxis = monthArray;
    // Y轴的数据
    var data = moneyArray;
    var dismoney = disArray;

    var option = {
        // 标题
        backgroundColor: '#fff',
        title: {
            text: '按月统计', // 主标题
            subtext: '通过月份查询对应的账单', // 副标题
            left:'center' // 标题对齐方式，center表示居中
        },
        // 提示框
        tooltip:{x:'月份',y:'价格'},
        legend:{
            data:['月份/月','价格/元'],
        },
        // X轴
        xAxis: {
            data: dataAxis,
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            }
        },
        // Y轴
        yAxis: {
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#999',
                }
            },

        },
        dataZoom: [
            {
                type: 'inside'
            }
        ],
        // 系列
        //
        series: [
            { //第一部分
                type: 'bar',
                data: dismoney,
                label:{show:true,position:'top',},
                name:'月优惠',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#b00'},
                            {offset: 0.5, color: '#d00'},
                            {offset: 1, color: '#f00'},
                        ]
                    )
                },
                animation: false,
                barGap: '100%',
            },

            { //第二部分
                type: 'bar',
                data: data, // 优惠
                name:'月实际消费',
                label:{show:true,position:'top',},
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#83bff6'},
                            {offset: 0.5, color: '#188df0'},
                            {offset: 1, color: '#188df0'}
                        ]
                    )
                },
                animation: false,
                barGap: '100%',
            },
            { //第一部分总消费
                name:'月总消费',
                type: 'bar', // 柱状图
                label:{show:true,position:'top',},
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#ddd'},
                            {offset: 0.5, color: '#bbb'},
                            {offset: 1, color: '#999'}
                        ]
                    )
                },
                barGap: '100%',
                data: sum,
                animation: false
            },
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
</script>
